<template>
  <!-- echarts自适应 -->
  <div class="home">
    <div class="box" v-for="(item, index) of list" :key="index">
      <MyEcharts width="100%" height="100%" :options="item" />
    </div>
  </div>
</template>

<script>
import MyEcharts from '@/components/MyEcharts.vue';
import { option1 } from './option1';
import { option2 } from './option2';
import { option3 } from './option3';
import { option5 } from './option5';
import { option6 } from './option6';
import { option7 } from './option7';

export default {
  components: { MyEcharts },
  data() {
    return {
      list: [],
    };
  },

  mounted() {
    this.list = [option1, option2, option3, {}, option5, option6, option7, {}];
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
  .box {
    height: 300px;
    width: 300px;
    border: 1px solid black;
    margin: 5px;
  }
}
</style>
